<template>
  <view class="access-records-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-title">
        <u-icon name="arrow-left" size="20" color="#333" @click="goBack"></u-icon>
        <text class="title-text">门禁记录</text>
      </view>
      <view class="header-actions">
        <u-button 
          type="primary" 
          size="small" 
          text="导出" 
          @click="exportRecords"
        ></u-button>
      </view>
    </view>

    <!-- 筛选区域 -->
    <view class="filter-section">
      <view class="filter-row">
        <view class="filter-item">
          <u-input
            v-model="filterParams.keyword"
            placeholder="搜索人员姓名"
            prefix-icon="search"
            clearable
            @input="onFilterChange"
          ></u-input>
        </view>
        <view class="filter-item">
          <u-picker
            :show="showGatePicker"
            :columns="[gateOptions]"
            @confirm="onGateConfirm"
            @cancel="showGatePicker = false"
          ></u-picker>
          <u-input
            v-model="filterParams.gateName"
            placeholder="选择门禁"
            readonly
            @click="showGatePicker = true"
          ></u-input>
        </view>
      </view>
      <view class="filter-row">
        <view class="filter-item">
          <u-picker
            :show="showDatePicker"
            mode="date"
            @confirm="onDateConfirm"
            @cancel="showDatePicker = false"
          ></u-picker>
          <u-input
            v-model="filterParams.date"
            placeholder="选择日期"
            readonly
            @click="showDatePicker = true"
          ></u-input>
        </view>
        <view class="filter-item">
          <u-picker
            :show="showStatusPicker"
            :columns="[statusOptions]"
            @confirm="onStatusConfirm"
            @cancel="showStatusPicker = false"
          ></u-picker>
          <u-input
            v-model="filterParams.statusText"
            placeholder="选择状态"
            readonly
            @click="showStatusPicker = true"
          ></u-input>
        </view>
      </view>
      <view class="filter-actions">
        <u-button type="info" text="重置" @click="resetFilter"></u-button>
        <u-button type="primary" text="查询" @click="searchRecords"></u-button>
      </view>
    </view>

    <!-- 统计信息 -->
    <view class="stats-section">
      <view class="stat-item">
        <view class="stat-number">{{ accessStats.total }}</view>
        <view class="stat-label">总记录数</view>
      </view>
      <view class="stat-item">
        <view class="stat-number">{{ accessStats.today }}</view>
        <view class="stat-label">今日记录</view>
      </view>
      <view class="stat-item">
        <view class="stat-number">{{ accessStats.success }}</view>
        <view class="stat-label">成功记录</view>
      </view>
      <view class="stat-item">
        <view class="stat-number">{{ accessStats.failed }}</view>
        <view class="stat-label">失败记录</view>
      </view>
    </view>

    <!-- 记录列表 -->
    <view class="records-section">
      <view class="section-header">
        <view class="section-title">门禁记录</view>
        <view class="section-actions">
          <u-button 
            type="info" 
            size="mini" 
            text="刷新" 
            @click="refreshRecords"
          ></u-button>
        </view>
      </view>
      
      <scroll-view 
        scroll-y="true" 
        class="records-list"
        :style="{ height: '400px' }"
        @scrolltolower="loadMoreRecords"
      >
        <view class="list-content">
          <view 
            v-for="record in accessRecords" 
            :key="record.id"
            class="record-item"
            @click="viewRecordDetail(record)"
          >
            <view class="record-header">
              <view class="record-user">
                <u-avatar :src="record.avatar" :text="record.userName.charAt(0)" size="40"></u-avatar>
                <view class="user-info">
                  <view class="user-name">{{ record.userName }}</view>
                  <view class="user-phone">{{ record.userPhone }}</view>
                </view>
              </view>
              <view class="record-status">
                <u-tag 
                  :text="record.statusText" 
                  :type="getStatusType(record.status)"
                  size="small"
                ></u-tag>
              </view>
            </view>
            
            <view class="record-details">
              <view class="detail-row">
                <text class="detail-label">门禁：</text>
                <text class="detail-value">{{ record.gateName }}</text>
              </view>
              <view class="detail-row">
                <text class="detail-label">时间：</text>
                <text class="detail-value">{{ record.accessTime }}</text>
              </view>
              <view class="detail-row">
                <text class="detail-label">方式：</text>
                <text class="detail-value">{{ record.accessMethod }}</text>
              </view>
              <view class="detail-row">
                <text class="detail-label">类型：</text>
                <text class="detail-value">{{ record.accessType }}</text>
              </view>
            </view>
            
            <view class="record-actions">
              <u-button 
                type="info" 
                size="mini" 
                text="详情" 
                @click.stop="viewRecordDetail(record)"
              ></u-button>
              <u-button 
                v-if="record.status === 'failed'"
                type="warning" 
                size="mini" 
                text="处理" 
                @click.stop="handleFailedRecord(record)"
              ></u-button>
            </view>
          </view>
          
          <!-- 加载更多 -->
          <view v-if="hasMore" class="load-more">
            <u-loading-icon mode="spinner" size="20"></u-loading-icon>
            <text class="load-text">加载中...</text>
          </view>
          
          <!-- 无更多数据 -->
          <view v-else-if="accessRecords.length > 0" class="no-more">
            <text class="no-more-text">没有更多数据了</text>
          </view>
          
          <!-- 空状态 -->
          <view v-if="accessRecords.length === 0" class="empty-state">
            <u-icon name="info-circle" color="#999" size="48"></u-icon>
            <text class="empty-text">暂无门禁记录</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 记录详情弹窗 -->
    <u-popup 
      :show="showDetailModal" 
      mode="center" 
      :round="10"
      @close="showDetailModal = false"
    >
      <view class="detail-modal">
        <view class="modal-header">
          <text class="modal-title">记录详情</text>
          <u-icon name="close" size="20" @click="showDetailModal = false"></u-icon>
        </view>
        <view class="modal-content">
          <view v-if="selectedRecord" class="detail-content">
            <view class="detail-section">
              <view class="section-title">基本信息</view>
              <view class="detail-item">
                <text class="item-label">姓名：</text>
                <text class="item-value">{{ selectedRecord.userName }}</text>
              </view>
              <view class="detail-item">
                <text class="item-label">手机：</text>
                <text class="item-value">{{ selectedRecord.userPhone }}</text>
              </view>
              <view class="detail-item">
                <text class="item-label">门禁：</text>
                <text class="item-value">{{ selectedRecord.gateName }}</text>
              </view>
              <view class="detail-item">
                <text class="item-label">时间：</text>
                <text class="item-value">{{ selectedRecord.accessTime }}</text>
              </view>
            </view>
            
            <view class="detail-section">
              <view class="section-title">访问详情</view>
              <view class="detail-item">
                <text class="item-label">访问方式：</text>
                <text class="item-value">{{ selectedRecord.accessMethod }}</text>
              </view>
              <view class="detail-item">
                <text class="item-label">访问类型：</text>
                <text class="item-value">{{ selectedRecord.accessType }}</text>
              </view>
              <view class="detail-item">
                <text class="item-label">状态：</text>
                <u-tag 
                  :text="selectedRecord.statusText" 
                  :type="getStatusType(selectedRecord.status)"
                  size="small"
                ></u-tag>
              </view>
              <view class="detail-item">
                <text class="item-label">备注：</text>
                <text class="item-value">{{ selectedRecord.remark || '无' }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
/**
 * 门禁记录页面
 * @author Wu.Liang
 * @date 2025-01-30
 * @version 1.0.0
 * @description 门禁记录功能，包含记录查看、筛选等
 */

import { ref, reactive, computed, onMounted } from 'vue'

// 页面状态
const showGatePicker = ref(false)
const showDatePicker = ref(false)
const showStatusPicker = ref(false)
const showDetailModal = ref(false)
const selectedRecord = ref(null)
const hasMore = ref(true)
const currentPage = ref(1)

// 筛选参数
const filterParams = reactive({
  keyword: '',
  gateName: '',
  date: '',
  status: '',
  statusText: ''
})

// 门禁选项
const gateOptions = [
  { label: '全部门禁', value: '' },
  { label: '小区大门', value: '小区大门' },
  { label: '1栋单元门', value: '1栋单元门' },
  { label: '2栋单元门', value: '2栋单元门' },
  { label: '3栋单元门', value: '3栋单元门' },
  { label: '地下车库门', value: '地下车库门' },
  { label: '后门', value: '后门' }
]

// 状态选项
const statusOptions = [
  { label: '全部状态', value: '', text: '全部状态' },
  { label: '成功', value: 'success', text: '成功' },
  { label: '失败', value: 'failed', text: '失败' },
  { label: '异常', value: 'error', text: '异常' }
]

// 门禁记录统计
const accessStats = reactive({
  total: 0,
  today: 0,
  success: 0,
  failed: 0
})

// 门禁记录列表
const accessRecords = ref([
  {
    id: 1,
    userName: '张三',
    userPhone: '138****1234',
    avatar: '',
    gateName: '小区大门',
    accessTime: '2025-01-30 14:30:25',
    accessMethod: '人脸识别',
    accessType: '进入',
    status: 'success',
    statusText: '成功',
    remark: ''
  },
  {
    id: 2,
    userName: '李四',
    userPhone: '139****5678',
    avatar: '',
    gateName: '1栋单元门',
    accessTime: '2025-01-30 14:25:18',
    accessMethod: '刷卡',
    accessType: '进入',
    status: 'success',
    statusText: '成功',
    remark: ''
  },
  {
    id: 3,
    userName: '王五',
    userPhone: '137****9012',
    avatar: '',
    gateName: '2栋单元门',
    accessTime: '2025-01-30 14:20:42',
    accessMethod: '密码',
    accessType: '进入',
    status: 'failed',
    statusText: '失败',
    remark: '密码错误'
  },
  {
    id: 4,
    userName: '赵六',
    userPhone: '136****3456',
    avatar: '',
    gateName: '地下车库门',
    accessTime: '2025-01-30 14:15:33',
    accessMethod: '车牌识别',
    accessType: '进入',
    status: 'success',
    statusText: '成功',
    remark: ''
  },
  {
    id: 5,
    userName: '钱七',
    userPhone: '135****7890',
    avatar: '',
    gateName: '小区大门',
    accessTime: '2025-01-30 14:10:15',
    accessMethod: '人脸识别',
    accessType: '离开',
    status: 'success',
    statusText: '成功',
    remark: ''
  },
  {
    id: 6,
    userName: '孙八',
    userPhone: '134****2345',
    avatar: '',
    gateName: '3栋单元门',
    accessTime: '2025-01-30 14:05:28',
    accessMethod: '刷卡',
    accessType: '进入',
    status: 'error',
    statusText: '异常',
    remark: '卡片过期'
  }
])

// 方法
const goBack = () => {
  uni.navigateBack()
}

const onFilterChange = () => {
  // 实时筛选
  searchRecords()
}

const onGateConfirm = (event) => {
  const selected = event.value[0]
  filterParams.gateName = selected.label
  showGatePicker.value = false
}

const onDateConfirm = (event) => {
  filterParams.date = `${event.year}-${event.month}-${event.day}`
  showDatePicker.value = false
}

const onStatusConfirm = (event) => {
  const selected = event.value[0]
  filterParams.status = selected.value
  filterParams.statusText = selected.text
  showStatusPicker.value = false
}

const resetFilter = () => {
  Object.assign(filterParams, {
    keyword: '',
    gateName: '',
    date: '',
    status: '',
    statusText: ''
  })
  searchRecords()
}

const searchRecords = () => {
  // 模拟搜索
  currentPage.value = 1
  hasMore.value = true
  
  // 这里应该调用API进行搜索
  uni.showToast({
    title: '搜索功能开发中',
    icon: 'none'
  })
}

const refreshRecords = () => {
  currentPage.value = 1
  hasMore.value = true
  searchRecords()
}

const loadMoreRecords = () => {
  if (!hasMore.value) return
  
  currentPage.value++
  
  // 模拟加载更多
  setTimeout(() => {
    hasMore.value = false
  }, 1000)
}

const viewRecordDetail = (record) => {
  selectedRecord.value = record
  showDetailModal.value = true
}

const handleFailedRecord = (record) => {
  uni.showModal({
    title: '处理失败记录',
    content: `确定要处理"${record.userName}"的失败记录吗？`,
    success: (res) => {
      if (res.confirm) {
        // 模拟处理
        record.status = 'success'
        record.statusText = '成功'
        record.remark = '已处理'
        
        uni.showToast({
          title: '处理成功',
          icon: 'success'
        })
      }
    }
  })
}

const exportRecords = () => {
  uni.showToast({
    title: '导出功能开发中',
    icon: 'none'
  })
}

const getStatusType = (status) => {
  const statusMap = {
    success: 'success',
    failed: 'error',
    error: 'warning'
  }
  return statusMap[status] || 'info'
}

// 页面加载
onMounted(() => {
  // 设置默认日期为今天
  const today = new Date()
  filterParams.date = today.toISOString().split('T')[0]
  
  // 更新统计
  updateStats()
  
  console.log('门禁记录页面加载完成')
})

const updateStats = () => {
  accessStats.total = accessRecords.value.length
  accessStats.today = accessRecords.value.filter(record => 
    record.accessTime.includes('2025-01-30')
  ).length
  accessStats.success = accessRecords.value.filter(record => 
    record.status === 'success'
  ).length
  accessStats.failed = accessRecords.value.filter(record => 
    record.status === 'failed' || record.status === 'error'
  ).length
}
</script>

<style lang="scss" scoped>
.access-records-page {
  min-height: 100vh;
  width: 100vw;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-header {
  background: white;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  
  .header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .title-text {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
}

.filter-section {
  background: white;
  padding: 16px;
  margin-bottom: 12px;
  
  .filter-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    
    .filter-item {
      flex: 1;
    }
  }
  
  .filter-actions {
    display: flex;
    gap: 12px;
    
    .u-button {
      flex: 1;
    }
  }
}

.stats-section {
  background: white;
  padding: 16px;
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  
  .stat-item {
    flex: 1;
    text-align: center;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    
    .stat-number {
      font-size: 20px;
      font-weight: 600;
      color: #3742fa;
      margin-bottom: 4px;
    }
    
    .stat-label {
      font-size: 12px;
      color: #666;
    }
  }
}

.records-section {
  background: white;
  padding: 16px;
  flex: 1;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    
    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
  }
  
  .records-list {
    .list-content {
      padding: 0;
    }
  }
  
  .record-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .record-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      .record-user {
        display: flex;
        align-items: center;
        gap: 12px;
        
        .user-info {
          .user-name {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
          }
          
          .user-phone {
            font-size: 12px;
            color: #666;
          }
        }
      }
    }
    
    .record-details {
      margin-bottom: 12px;
      
      .detail-row {
        display: flex;
        margin-bottom: 4px;
        
        .detail-label {
          font-size: 12px;
          color: #999;
          min-width: 60px;
        }
        
        .detail-value {
          font-size: 12px;
          color: #333;
        }
      }
    }
    
    .record-actions {
      display: flex;
      gap: 8px;
    }
  }
  
  .load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    
    .load-text {
      font-size: 14px;
      color: #666;
    }
  }
  
  .no-more {
    text-align: center;
    padding: 20px;
    
    .no-more-text {
      font-size: 14px;
      color: #999;
    }
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 20px;
    
    .empty-text {
      font-size: 16px;
      color: #999;
    }
  }
}

.detail-modal {
  width: 90vw;
  max-width: 500px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  
  .modal-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
  
  .modal-content {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
  }
  
  .detail-content {
    .detail-section {
      margin-bottom: 24px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f0f0;
      }
      
      .detail-item {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .item-label {
          font-size: 14px;
          color: #666;
          min-width: 80px;
        }
        
        .item-value {
          font-size: 14px;
          color: #333;
        }
      }
    }
  }
}

// 响应式适配
@media screen and (max-width: 375px) {
  .page-header {
    padding: 12px;
  }
  
  .filter-section,
  .stats-section,
  .records-section {
    padding: 12px;
  }
  
  .filter-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .stat-item {
    padding: 8px;
    
    .stat-number {
      font-size: 18px;
    }
  }
  
  .record-item {
    padding: 12px;
  }
}

@media screen and (min-width: 414px) {
  .access-records-page {
    width: 100vw;
    max-width: none;
    margin: 0;
  }
}
</style>
